Similar to Boostrap, we can dowland the JQuery, or we can add it with the CDN. Naturaly the CDN have some ventajes over dowland the file. Minify: it's trying to reduce a file size, to the minus code, this process is deleting all the breaklines, spaces, comments or somethingn innecesary code or character from our code.
The CDN
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
In the file.html <!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script> <!-- own js -->
<script src="./index.js"></script>
Selecting Elements
for using the select in jquery, we just need the dollar sign "$":
Hello there i'm a string
//------- with JQUERY $(".select-btn").each((index, element)=>{
---code
$(".text1").text("--code");
//------- WITH JS document.querySelectorAll(".select-btn").forEach((element, index) => { --code document.querySelector(".text1").textContent --code
Manipulating Styles
Toching the CSS, for that we just add the css method, and pass througth: first, the css property, second, the value for that css property
Hi i'm a Title # 2!
//-------Set the css value
pass the atribute as the first paramter, and, the value as the second parameter $(".title-2").css("color",randomRgb());
//-------Get the css value
pass the atribute only, without the value
alert("Color setted "+ $(".title-2").css("color"));
//-------Add a class
$(".title-2").addClass("big-title italic");
//-------Has a class?
alert("Has big title? : "+$(".title-2").hasClass("big-title"));
//-------remove a class?
$(".title-2").removeClass("big-title");
Manipulating Text
Toching the textContent, for that we just add the text() method, and pass througth as a parameter the whised text.
To get the textContetn, don't pass any parameter
Instance we can use html() method its equivalent to say innerHTML
with parameter we set the value, with any parameter we get the value
Hi i'm a Title # 2!
passing the whised text as a paramneter //-------Set text with text()
$(".title-3").text("Hi <i>"+name+" </i>");
//-------Set text with html()
$(".title-3").html("Hi <i>"+name+" </i>");
Manipulating Atributes
We can add or change atributes by the function .prop("property","valueIfWantedToChange")
passing the whised value as a the second paramneter
//-------Set src atribute
let disabled = $(".btn-test").prop("disabled"); //-- method called without the second parameter, so it's return the value with any change
$(".btn-test").prop("disabled",(disabled ? false : true));
Adding Event Listeners
We can add event listeners with the method .on("event",callBackFunction)
//-------SAY HI
$(".modify-event-btn").on("click",function () {
alert("Hi, my clases are:"+$(this).prop("class")); });
//-------disabled button (this button is above, in the Manipulating atributes )
$($(".modify-atributes-btn")[0]).on("click",function () {
let disabled = $(".btn-test").prop("disabled");
$(".btn-test").prop("disabled",(disabled ? false : true)); });
We can add or delete new elements, in current serverd page, for that:
CREATE AN ELEMENT: For that we select the elemente, and with .before("html_code_to_add") we add the wished content
instance of that we can create elements with the command .after("html_code_to_add") too, with that we're going to add an elemente after the elmente selected
METHODS TO ADD:
.before("html_code_to_add"): It would add the the code before the elment selected
.after("html_code_to_add"): It would add the code after the element selected
.prepend("html_code_to_add"):It would add the code inside the elemente selected, but before the cotent, <h1> "html_code_displayed""content" </h1>
.append("html_code_to_add"):It would add the code inside the elemente selected, but after the cotent, <h1> "content""html_code_displayed" </h1>
REMOVE AN ELEMENT: For we just use the method .remove() with the selected elemente wished to delete
//-------ADD ELEMENTS
function addElement() {
$(".add-before-me").before("<button type='button' class='btn-added' onclick='hi()'>I'm a new button</button>");
};
//-------REMOVE ELEMENTS
function removeBtn() {
let btns = $(".btn-added")
let len = btns.length
if (len === 0) {
alert("There's not any bnt-new to delete");
}else{
$(btns[len-1]).remove();
};
};
Animations
W3schools documentation about jquery effect methods.
With JQuery we can make lots of effects.
Fade img
//-------FADE TOOGLE
function imgFadeToogle() {
$(".img-2").fadeToggle();
};
//-------SLIDE TOOGLE
function imgSlideToogle() {
$(".img-2").slideToggle();
}:
